<template>
  <div class="container-box" :class="position ? 'isFixed' : 'isAbsolute'">
    <div class="loading_box">
      <svg viewBox="-50 -50 100 100" width="200">
        <!-- defs标签定义需要重复使用的图形元素 -->
        <defs>
          <!-- g标签用来组合对象容器 -->
          <g id="spinner">
            <!-- circle标签定义一个圆,fill为填充颜色,cx,cy,r分别为圆心的x,y坐标和圆的半径 -->
            <circle r="9" fill="#c6c09c" cx="40" cy="0"></circle>
            <circle r="9" fill="ffc98b" cx="0" cy="40"></circle>
            <circle r="9" fill="#ffb284" cx="-40" cy="0"></circle>
            <circle r="9" fill="#e79796" cx="0" cy="-40"></circle>
          </g>
        </defs>
        <g class="single" opacity="1">
          <use href="#spinner"></use>
          <g class="single" opactity="0.8">
            <use href="#spinner"></use>
            <g class="single" opacity="0.8">
              <use href="#spinner"></use>
            </g>
          </g>
        </g>
      </svg>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    //   true  占满整个全屏
    //   false  不占满全屏
    position: {
      type: Boolean,
      default: true,
    },
  },
  components: {},
  data() {
    return {};
  },
  methods: {},
  mounted() {},
  watch: {},
  computed: {},
  filters: {},
};
</script>
<style lang="scss" scoped>
.container-box.isFixed {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.3);
}
.container-box.isAbsolute {
  left: 0;
  position: absolute;
  right: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.3);
}
.loading_box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.single {
  // 调整缩放至合适的大小
  transform: scale(0.6) rotate(0);
  // 添加旋转动画
  animation: spin 2s ease-in-out infinite;
}
@keyframes spin {
  to {
    transform: scale(0.6) rotate(1turn);
  }
}
</style>
